import MyTable from "@/components/MyTable";
import SearchHeader from "@/components/SearchHeader";
import useTable from "@/hooks/useTable";
import { Button, Form, Popconfirm, message } from "antd";
import { useMemo, useRef } from "react";
import { useConfig } from "./form.config";

import ButtonGroup from "@/components/ButtonGroup";
import { changeArticleStatus, delArticle, getArticlePage } from "@/services/article";
import { ArticleStatusEnum } from "@/constants/enum";
import MyModal from "@/components/MyModal";
import { useBoolean,useRequest } from "ahooks";
import DetailModal from "./DetailModal";
import useGobal from "@/models/global";

export default () => {
  const config = useConfig();
  const {refreshCheckNUmber} = useGobal('global')
  const [form] = Form.useForm();
  const defaultFormValues = { status:1,title:''}
  const [open,{toggle}]= useBoolean(false) //审核模态框
  const currentInfo = useRef({});
  const isCheck = useRef(false)

  const { tableProps, reset,searchBy, submit, refresh } = useTable(getArticlePage, {
    defaultFormValues: defaultFormValues,
    form: form,
    fieldParams:{//分页参数字段映射
      pageSize:'size',
      pageCurrent:'current',
      totalCount:'totalCount',
    }
  });
  const {runAsync:del} = useRequest(delArticle,{
    manual:true,
    onSuccess:()=>{
      message.success('删除成功')
      refresh()
    }
  })

  const columns = useMemo(() => {
    return [
      {
        title: "标题",
        dataIndex: "title",
      },
      {
        title: "作者",
        dataIndex: "createdBy",
      },
      {
        title: "发布时间",
        dataIndex: "updatedTime",
      },
      {
        title: "状态",
        dataIndex: "status",
        render: (v) => ArticleStatusEnum[v],
      },
      {
        title: "操作",
        dataIndex: "action",
        align: "center",
        render: (_, record) => {
          const { id,status } = record || {};
          return (
            <ButtonGroup>
              <Button type="link" onClick={()=>{
                  isCheck.current = status===1 
                  currentInfo.current = record
                  toggle()
                }}>
                  {
                  status===1?'审核':'详情'
                   }  
                  </Button>
              <Popconfirm
                placement="topLeft"
                title={"确认删除吗？"}
                okText="确认"
                cancelText="取消"
                onConfirm={async() => {
                  await del(id)
                  if(status===1){
                    setTimeout(()=>{
                      refreshCheckNUmber()
                    },2000)
                  }
                }}
              >
                <Button type="link">删除</Button>
              </Popconfirm>
            </ButtonGroup>
          );
        },
      },
    ];
  }, []);

  return (
    <>
      <div style={{ marginBottom: "16px" }}>
        <SearchHeader
          configs={config}
          form={form}
          onSubmit={submit}
          onReset={()=>{
            reset();
          }}
        />
      </div>
      <MyTable rowKey={"id"} columns={columns} {...tableProps} />
      <DetailModal info={currentInfo.current} open={open} refresh={()=>{
        refresh()
        setTimeout(()=>{
          refreshCheckNUmber()
        },2000)
      }} isCheck={isCheck.current} close={()=>{
        toggle()
        currentInfo.current = {}
      }}/>
    </>
  );
};
